<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单详情 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
		<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
		<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
		<link rel="stylesheet" type="text/css" href="./components/user-frame.css" />
		<style>
			.app-title{
				border-bottom: 2px solid #EAEAEA;
			}
			
			.app-title-text:before{
				content: "";
				display: block;
				position: absolute;
				width: 0px;
				height: 0px;
				border-left: 5px solid transparent;
				border-top: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #3197D7;
				bottom: 0;
				right: 53px;
			}
			
			.app-title-text{
				color: #3197D7;
				border-bottom: 2px solid #3197D7;
				display: inline-block;
				position: relative;
				width: 116px;
				height: 36px;
				line-height: 34px;
				text-align: center;
				cursor: pointer;
				top: 2px;
			}
			
			.app-order{
				padding: 20px;
			}
			
			.app-order-warpper{
				border: 1px solid #DAE5F2;
				padding: 16px;
			}
			
			.app-order-warpper div{
				line-height: 2;
			}
			
			.app-order-warpper-title{
				font-weight: 900;
			}
			
			.app-order-warpper .el-button--mini{
				padding: 4px 8px;
			}
			
			.app-order-grid{
				border: 1px solid #E3E3E3;
			}
			
			.app-order-grid-row{
				display: grid;
				grid-template-columns: 500px 100px 100px 100px;
				grid-template-rows: auto;
			}

			.app-order-grid-row > div {
				line-height: 80px;
			}

			.app-order-grid-row:first-child {
				grid-template-rows: 60px;
				background: #F0F0F0;
			}

			.app-order-grid-row:first-child > div {
				line-height: 60px;
			}

			.app-order-grid-row-item {
				border-top: 1px solid #E3E3E3;
			}

			/*	适配行内的图片*/
			.inline-grid {
				display: grid;
				grid-template-columns: 70px 150px;
			}

			.inline-grid:first-child {
				margin-top: 10px;
				margin-left: 150px;
			}

			.inline-grid:nth-child(2) {
				margin-top: 10px;
				padding-left: -400px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<header-full :bordered="true"></header-full>
			<user-frame class="m-t-20">
				<div class="app-title">
					<div class="app-title-text">订单详情</div>
				</div>

				<!--				还应该添加一个返回上级菜单的按钮-->
				<!--				用户信息被写在session中，返回页面将自动取session中的内容重新加载数据-->

				<el-link type="primary" href="/order.html" icon="el-icon-back" style="margin-top: 10px">返回订单列表</el-link>
				<div class="app-order">
					<div class="app-order-warpper text-4 text-general-1">

						<div class="app-order-warpper-title">订单状态：{{order.statusDesc}}</div>
						<!--						现在我的想法是将这个地方的订单状态改成像淘宝一样的，但是可以使用步骤条-->
						<!--						<div class="app-order-warpper-title">-->
						<!--							-->
						<!--						</div>-->
						<el-steps :active="order.status" simple>
							<!--active : 当前的步骤-->
							<!--finish-status : 已完成的步骤样式，可用slot取代属性的设置 -->
							<!--可直接使用simple简单样式-->
							<el-step title="拍下宝贝" icon="el-icon-s-order"></el-step>
							<el-step title="交保护费" icon="el-icon-wallet"></el-step>
							<el-step title="卖家发货" icon="el-icon-truck"></el-step>
							<el-step title="确认收货" icon="el-icon-receiving"></el-step>
							<el-step title="等待评价" icon="el-icon-s-comment"></el-step>
						</el-steps>

						<!--						以下部分是订单的具体内容-->
						<el-divider></el-divider>
						<div class="app-order-warpper-title">收货地址</div>
						<div>收货联系方式: {{order.addr.province}} {{order.addr.city}} {{order.addr.district}}
							{{order.addr.addr}} {{order.addr.zip}} {{order.addr.name}}
							{{order.addr.mobile}}
						</div>
						<el-divider></el-divider>
						<div>订单信息</div>
						<el-row>
							<el-col :span="12">
								<div>订单编号: {{order.orderNo}}</div>
								<div>商品合计(促销金额): ¥{{order.amount.toFixed(2)}}</div>
								<div>应支付金额: ¥{{order.amount.toFixed(2)}}</div>
								<div>发货时间: {{order.deliveryTime}}</div>
								<div>物流单号:</div>
								<div>收货时间: {{order.finishTime}}</div>
								<div>支付状态: {{order.statusDesc}}</div>
							</el-col>
							<el-col :span="12">
								<div>下单时间: {{order.createTime}}</div>
								<div>店铺合计金额: ¥{{order.amount.toFixed(2)}}</div>
								<div>发票抬头:</div>
							  <div>物流公司: </div>
							  <div>物流联系方式: </div>
							  <div>支付金额: </div>
							  <div>支付时间: </div>
						  </el-col>
						</el-row>
						<div>
							<el-button v-if="order.statusDesc === '未付款'" type="primary" size="mini" class="m-t-12 m-b-12" @click="go_pay">立即支付</el-button>
							<el-button v-if="order.statusDesc === '未付款'" type="text" size="mini" class="m-t-12 m-b-12" @click="go_cancel">取消订单</el-button>
							<el-button v-if="order.statusDesc === '已发货'" type="primary" size="mini" class="m-t-12 m-b-12" @click="go_receive">确认收货</el-button>
						</div>
						<div class="app-order-grid  center m-b-20">
							<div class="app-order-grid-row">
								<div>商品</div>
								<div>单价(元)</div>
								<div>数量</div>
								<div>商品总价</div>
							</div>
							<div class="app-order-grid-row app-order-grid-row-item" v-for="item in order.orderItems">

								<div class="inline-grid">
									<img :src=item.iconUrl width="60px" height="60px">
									<div>{{item.commodityName}}</div>
								</div>
								<div>¥{{item.curPrice.toFixed(2)}}</div>
								<div>{{item.quantity}}</div>
								<div>¥{{item.totalPrice.toFixed(2)}}</div>
							</div>
						</div>
					</div>
				</div>
			</user-frame>
			<footer-image></footer-image>
			<footer-link></footer-link>
			<footer-bottom></footer-bottom>
		</div>
		
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="./components/min-width-container.js"></script>
		<script src="./components/footer-image.js"></script>
		<script src="./components/footer-bottom.js"></script>
		<script src="./components/footer-link.js"></script>
		<script src="./components/header-full.js"></script>
		<script src="./components/user-frame.js"></script>
		<script>
		    const app = new Vue({
		        el: "#app",
		        data(){
					return {
						orderNo: '',
						order: {},
						pay_form: {
							orderNo: "",
							order: {},
						},
						paying: false,
						hanging: false,
						paypal_html: "",
					};
		        },
		        created(){
		        	if(/^\?\d+$/.test(window.location.search)){
		        		const query = window.location.search.trim();
		        		this.orderNo = query.substring(1, query.length);
		        		//console.log(this.orderNo);

						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo)
						axios.post("/order/getdetail.do", params).then(response=> {
							if (response.data.status === 0) {
								this.order = response.data.data;

							} else {
								if (response.data.msg) {
									console.log(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
						});
		        	}else{
		        		this.$message.error("非法的访问");
		        	}
		        },
		        methods: {
					go_pay() {
						var temp_form = document.createElement("form")
						temp_form.action = "/ali/pay.do"
						temp_form.target = "_self"//在本页面打开新窗口
						temp_form.method = "post"
						// temp_form.style.display = "none"
						//添加参数
						var o1 = document.createElement("textArea")
						o1.name = "outTradeNo"
						o1.value = this.orderNo
						temp_form.appendChild(o1)

						var o2 = document.createElement("textArea")
						o2.name = "subject"
						o2.value = this.order.orderItems[0].commodityName
						temp_form.appendChild(o2)

						var o3 = document.createElement("textArea")
						o3.name = "totalAmount"
						o3.value = this.order.amount
						temp_form.appendChild(o3)

						var o4 = document.createElement("textArea")
						o4.name = "body"
						o4.value = ''
						temp_form.appendChild(o4)

						document.body.appendChild(temp_form)
						temp_form.submit()
					},
					go_cancel() {
						this.$confirm('取消此订单, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							const params = new URLSearchParams();
							params.append("orderNo", this.orderNo);
							axios.post("/order/cancelorder.do", params).then(response => {
						  		if(response.data.status === 0){
									this.$message({
										message: "取消成功",
										type: "success"
									});
									this.order.status = 5;
									this.order.statusDesc = "取消";
						  		}else{
						  			if(response.data.msg){
						  	    		this.$message.error(response.data.msg);
						  			}
						  		}
						    }).catch(err=>{
						  	    console.log(err);
						  	    this.$message.error("连接服务器异常");
						    });

						})
					},
					go_receive(){
						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo);
						axios.post("/order/confirmreceipt.do", params).then(response=>{
							if (response.data.status === 0) {
								this.$message({
									message: "收货成功",
									type: "success"
								});
								this.order.status = 3;
								this.order.statusDesc = "交易成功";
							} else {
								if (response.data.msg) {
									this.$message.error(response.data.msg);
								}
							}
						}).catch(err => {
							console.log(err);
							this.$message.error("连接服务器异常");
						});
					},
				}
		    });
			
		</script>
	</body>
</html>

